<div class="container mt-5">
  <div class="problem-list bg-light p-4 rounded shadow-sm">
    <div class="problem-item d-flex justify-content-between align-items-center py-3 px-2 border-bottom"
         *ngFor="let problem of problems"
         [routerLink]="['/problems/', problem.id]"
         role="button">
      <div class="d-flex flex-column">
        <span class="problem-id text-muted small">#{{ problem.id }}</span>
        <span class="problem-title fw-semibold">{{ problem.title }}</span>
      </div>

      <div class="d-flex align-items-center gap-3">
        <span class="difficulty-label"
              [ngClass]="{
                'easy': problem.difficulty === 'Easy',
                'medium': problem.difficulty === 'Medium',
                'hard': problem.difficulty === 'Hard'
              }">
          {{ problem.difficulty }}
        </span>
        <a [routerLink]="['/problems', problem.id]" class="btn btn-outline-dark btn-sm">详情</a>
      </div>
    </div>
  </div>
</div>
